import { styled } from '@umijs/max'
import { PropsWithChildren } from 'react'

const Container = styled.div`
  width: 100%;
  padding: 20px 25px;
  background-color: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
`

const Header = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  color: var(--ant-diy-text-color);
  margin-bottom: 20px;

  .extra {
    margin-left: auto;
  }
`

const Footer = styled.div`
  width: calc(100% + 50px);
  padding: 16px 25px;
  background-color: #F7F8FA;
  display: flex;
  margin: 20px -25px -20px;
`

interface CardProps {
  header?: React.ReactNode
  extra?: React.ReactNode
  footer?: React.ReactNode
  className?: string
}

export const Card: React.FC<PropsWithChildren<CardProps>> = props => {
  return (
    <Container className={props.className}>
      {(props.header || props.extra) && <Header>
        {props.header}
        <div className="extra">{props.extra}</div>
      </Header>}
      {props.children}
      {props.footer && <Footer>{props.footer}</Footer>}
    </Container>
  )
}